<template>
  <div>
    <mu-appbar style="width: 100%;margin-bottom: 1rem" title="用户中心"></mu-appbar>
    <mu-container>

      <div style="width:100%;height:6rem;">
        <div style="text-align: center;height:100%;line-height:100%;">
          <a href="#/uc/edit">

            <p>
              <mu-avatar slot="avatar">
                <img :src="user.avatar">
              </mu-avatar>
            </p>
            <p style="color: #666;font-size: 1.5rem;">
              {{ user.user_name }}
            </p>

          </a>

        </div>
      </div>

      <mu-card style="width: 100%;">
        <mu-list>
          <mu-list-item button :ripple="true"  href="#/purchase/post">
            <mu-list-item-title> 发布需求 </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item >
          <mu-list-item button :ripple="true" href="#/good/post">
            <mu-list-item-title>  发布产品 </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="true" href="#/uc/payment">
            <mu-list-item-title>  财务管理  </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="true" href="#/uc/employ">
            <mu-list-item-title>  我是雇主  </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="true" href="#/uc/server">
            <mu-list-item-title>  我是服务商  </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item>
          <mu-list-item button :ripple="true" href="#/uc/logout">
            <mu-list-item-title>  退出登录  </mu-list-item-title>
            <mu-list-item-action>
              <img :src="icon.right" alt="" class="icon">
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>
      </mu-card>
    </mu-container>
    <toolbar :value="'uc'"></toolbar>
  </div>
</template>

<script>
import toolbar from "@/view/common/toolbar"
import carouselImg2 from '@/img/bg2.jpg';


export default {
  name: 'HelloWorld',
  data () {
    return {
        carouselImg2:carouselImg2,
        icon:{
            right:require("@/img/icon/right.png"),
        },
        user:{},
        site_url:BASE.site_url,
        msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.load_data();
  },
    methods:{
        load_data(){
            let $this = this;
            this.$api.user(this.form,function(resp){
                if(resp.code == 0){
                    $this.user = resp.data;
                }else{
                    $this.$toast.error(resp.msg)
                }
            });
        }
    },
  components:{
      toolbar
  }
}
</script>

<style>
  .icon{
    width:20px;
  }
  .mu-card-title{
    line-height: 3rem;
  }
</style>